<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js-this用法</title>
</head>
<body>
    <h1>js this关键字</h1>
    <p>实例中，<b>this</b>指向了<b>person</b>对象</p>
    <p>因为person对象是fullName方法的所有者。</p>

    <p id="useThisInMethod"></p>
    <script>
        // 方法中的this
        var person = {
            firstName:"Shaly",
            lastName:"Yang",
            id:666,
            fullName:function(){
                return this.firstName + " " + this.lastName;
            }
        }
        // document.getElementById("demo").innerHTML= person.fullName;
        document.getElementById("useThisInMethod").innerHTML= person.fullName();
    </script>
<!-- _____________________________________________________________________________ -->
    <p id="useThisSingle"></p>
    <script>
        // 单独使用this
        var x = this;
        document.getElementById("useThisSingle").innerHTML= x + " 单独使用this指向全局对象";
    </script>
<!-- _____________________________________________________________________________ -->
    <p id="useThisInFunction_default"></p>
    <script>
        function myFunction(){
            return this;
        }
        document.getElementById("useThisInFunction_default").innerHTML= x + " 在函数中使用this指向全局对象";
    </script>
<!-- _____________________________________________________________________________ -->
    <p id="useThisInEvent"></p>
    <p><b>在HTML事件句柄中this指向接收事件的html元素</b></p>
    <button onclick="this.style.display='none'">I will be display after click.</button>
<!-- _____________________________________________________________________________ -->
    <h1 style="color: red;">显示函数绑定</h1>
    <p id="explicitFunctionBingding"></p>
    <script>
        var person1 = {
            fullName: function() {
                return this.firstName + " " + this.lastName;
              }
        }
        var person2 = {
            firstName:"John",
            lastName: "Doe",
          }
          var x = person1.fullName.call(person2);
          document.getElementById("explicitFunctionBingding").innerHTML = x;
    </script>

</body>
</html>